<template>
  <div class="student-detail-container">
    <el-button @click="backHandler" type="primary" icon="el-icon-arrow-left">返回</el-button>
    <div class="header">
      
      <h1>学生详情</h1>
    </div>
    <div class="student-card">
      <div class="student-info">
        <p><strong>学号：</strong>{{ student.id }}</p>
        <p><strong>姓名：</strong>{{ student.name }}</p>
        <p><strong>性别：</strong>{{ student.gender }}</p>
        <p><strong>年龄：</strong>{{ student.age }}</p>
        <p><strong>班级：</strong>{{ student.class }}</p>
        <p><strong>专业：</strong>{{ student.major }}</p>
        <p><strong>院系：</strong>{{ student.department }}</p>
        <p><strong>入学日期：</strong>{{ student.admissionDate }}</p>
        <p><strong>导师：</strong>{{ student.advisor }}</p>
        <p><strong>联系方式：</strong>{{ student.contact }}</p>
        <p><strong>邮箱：</strong>{{ student.email }}</p>
        <p><strong>地址：</strong>{{ student.address }}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'StudentDetail',
  data() {
    return {
      student: {
        id: '160341',
        name: '王五',
        gender: '女',
        age: 21,
        class: '信管1601',
        major: '信息管理与信息系统',
        department: '商贸学院',
        admissionDate: '2022年9月1日',
        advisor: '张老师',
        contact: '123-456-7890',
        email: 'wangwu@example.com',
        address: 'XX省XX市XX区XX路XX号'
      }
    };
  },
  mounted() {
    let id = this.$route.query.id;
    alert(id);
  },
  methods: {
    backHandler() {
      this.$router.go(-1);
    }
  }
};
</script>

<style scoped>
.student-detail-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.student-card {
  background-color: #f9f9f9;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.student-info p {
  margin: 10px 0;
  font-size: 16px;
}

.student-info strong {
  color: #333;
}

h1 {
  color: #333;
}
</style>